<!--
 * @Description: 
 * @Author: Leequik
 * @Date: 2025-06-15 14:20:22
 * @LastEditTime: 2025-07-02 06:59:50
 * @LastEditors: Leequik
-->

<template>
<div class="container-fluid wraper">
    <h1 class="title">
        Vue3 组件通信
    </h1>
    <hr>
    <div class="row">
        <div class="col-xs-3 col-md-3 col-lg-3 col-xl-3" id="sidebar">
            <RouterLink active-class="active" class="list-group-item" to="/props">1.props</RouterLink>
            <router-link active-class="active" class="list-group-item" to="/event">2.自定义事件</router-link>
            <router-link active-class="active" class="list-group-item" to="/mitt">3.mitt</router-link>
            <router-link active-class="active" class="list-group-item" to="/model">4.v-momdel</router-link>
            <router-link active-class="active" class="list-group-item" to="/attrs">5.$attrs</router-link>
            <router-link active-class="active" class="list-group-item" to="/ref-parent">6.$refs、$parent</router-link>
            <router-link active-class="active" class="list-group-item" to="/provide-inject">7.provide、inject</router-link>
            <router-link active-class="active" class="list-group-item" to="/pinia">8.pinia</router-link>
            <router-link active-class="active" class="list-group-item" to="/slot">9.slot</router-link>
        </div>
        <div class="col-xs-9 col-md-9 col-lg-9 col-xl-9">
            <div class="panel-body">
                <router-view></router-view>
            </div>
        </div>
    </div>  
</div>
</template>

<style scoped>
#sidebar{
    border: 1px solid #ddd;
    border-radius: 5px; 
    background-color: rgba(165, 164, 164);
    padding: 20px;
}
.list-group-item{
    padding: 5px;
}
.list-group-item.active{
    background-color: skyblue;
}
.list-group-item:hover{
    background-color: #fff;
}
</style>